<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
const BarLeft = defineAsyncComponent(() => import('@/components/PostBarSup/BarLeft.vue'));
const BarContent = defineAsyncComponent(() => import('@/components/PostBarSup/BarContent.vue'));
const BarRight = defineAsyncComponent(() => import('@/components/PostBarSup/BarRight.vue'));
const props = defineProps<{
	idx: number,
}>()
</script>

<template>
	<li class="post-bar">
		<bar-left></bar-left>
		<bar-content :idx="idx"></bar-content>
		<bar-right :idx="idx"></bar-right>
	</li>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.post-bar {
	width: 100%;
	@include clearfix;
	padding: 20px 0;
	border: solid 1px #e4e6eb;
	background-color: #fff;
}
</style>